<template>
  <el-button type="primary" size="small" @click="openDialog">
    <el-icon><CirclePlus /></el-icon>&nbsp;&nbsp;新建
  </el-button>
  <general-table 
    :columns="columns"
    :tableData="tableData"
    :tableAttr="tableAttr"
  >
    <!-- 
      当表格的展开行里面也有表格时，展开行内的表格操作列使用popconfirm和popover，方法与只有一个表格时一样，只有一个区别：
        不能再用index去区别当前点击的是哪一行，因为展开行内表格行的index也是从0开始，会造成index重复
        改用事件对象获取当前点击的到底是哪个表格的哪一行的dom
     -->
    <template #expand>
      <general-table 
        :columns="expandCol"
        :tableData="expandTable"
        :tableAttr="tableAttr"
      >
        <template #operate="{ scope }">
          <el-button type="primary" size="small" @click="openDialog">
            <el-icon><CirclePlus /></el-icon>&nbsp;&nbsp;add
          </el-button>
          <el-popover
            effect="light"
            trigger="hover"
            width="auto"
            content="popover"
            :teleported="false"
          >
            <template #reference>
              <!-- 虽然设置了popover的触发方式是hover，但是点击会触发行点击事件，所以加个阻止冒泡 -->
              <el-button plain size="small" @click.stop="" @mouseenter="($event: any) => handleDelete(scope.$index, $event)">
                <el-icon><Edit /></el-icon>&nbsp;&nbsp;Edit
              </el-button>
            </template>
          </el-popover>
          &nbsp;
          <el-popconfirm  
            :teleported="false"     
            title="Are you sure to delete this?"
          >
            <template #reference>
              <el-button size="small" @click.stop="($event: any) => handleDelete(scope.$index, $event)">
                <el-icon><Delete /></el-icon>&nbsp;&nbsp;Delete
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </general-table> 
    </template>

    <template #date="{ scope: { row } }">
      <el-icon><timer /></el-icon>
      {{  row.date }}
    </template>

    <template #operate="{ scope }">
      <el-button type="primary" size="small" @click="openDialog">
        <el-icon><CirclePlus /></el-icon>&nbsp;&nbsp;add
      </el-button>
      <el-popover
        effect="light"
        trigger="hover"
        width="auto"
        content="popover"
        :teleported="false"
      >
        <template #reference>
          <el-button plain size="small" @click.stop="" @mouseenter="($event: any) => handleDelete(scope.$index, $event)">
            <el-icon><Edit /></el-icon>&nbsp;&nbsp;Edit
          </el-button>
        </template>
      </el-popover>
      &nbsp;
      <el-popconfirm  
        :teleported="false"     
        title="Are you sure to delete this?"
      >
        <template #reference>
          <el-button size="small" @click.stop="($event: any) => handleDelete(scope.$index, $event)">
            <el-icon><Delete /></el-icon>&nbsp;&nbsp;Delete
          </el-button>
        </template>
      </el-popconfirm>
    </template>
  </general-table>

  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="30%"
  >
    <span>This is a message</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, nextTick } from 'vue'
import GeneralTable from '@/components/GeneralTable.vue'

const handleDelete = (index: number, event: any) => {
  // 浏览器兼容事件对象   像火狐、联想等浏览器的事件对象上不存在path属性，所以必须这样写
  const ev = window.event || event;
  const path = ev.composedPath && ev.composedPath();

  nextTick(() => {
    let listDom = document.querySelectorAll('.el-table__row')
    listDom?.forEach((item: any) => {
      item.style.zIndex = 0
    })
    /*
      由于Button组件里面还嵌套了span标签，又使用的icon图标，所以哪怕点击的是删除按钮，但是获取到的事件对象都是不一样的，
      当前点击的表格行dom在path属性里面的位置也是不一样的，所以必须做个判断：看当前点击的是哪个标签的事件对象
    */
    if(event.target.tagName === 'svg') {
      path[5].style['z-index'] = 2022
    }else if(event.target.tagName === 'SPAN') {
      path[4].style['z-index'] = 2022
    }else if(event.target.tagName === 'BUTTON') {
      path[3].style['z-index'] = 2022
    }else if(event.target.tagName === 'path') {
      path[6].style['z-index'] = 2022
    }
  })
}

let dialogVisible = ref(false)
const openDialog = () => {
  tableAttr.rowclick()      // 设置表格行z-index: 0
  dialogVisible.value = true
}

const columns = [
  { slot: 'expand', type: 'expand' },
  { label: 'date', slot: 'date' },
  { label: 'name', prop: 'name' },
  { label: 'address', prop: 'address' },
  { label: '操作', slot: 'operate' },
]

const expandCol = [
{ label: 'Name', prop: 'name', align: 'center' },
{ label: 'State', prop: 'state' },
{ label: 'City', prop: 'city' },
{ label: 'address', prop: 'address' },
{ label: 'Zip', prop: 'zip' },
{ label: '操作', slot: 'operate', width: 300 },
]

const tableAttr = {
  rowstyle: () => {
    return {
      position: 'relative',
      zIndex: 0
    }
  },
  rowclick: () => {
    let listDom: any = document.querySelectorAll('.el-table__row')
    listDom.forEach((item: any) => {
      item.style.zIndex = 0
    })
  },
  border: true
}

interface expand {
  name: string
  state: string
  address: string
  city: string
  zip: string
}
const expandTable: expand[] = [
  {
    name: 'Jerry',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
  },
  {
    name: 'Spike',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
  },
  {
    name: 'Tyke',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
  },
]

interface User {
  date: string
  name: string
  address: string
}
const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
  
</script>
